<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./index.css">
</head>

<body>
    <div id="wrapper">
    </div>

    <div class="admin_box">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>

    <div class="pathway_box">
        <div class="pathway_1">
            <div class="box1">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
        </div>

        <div class="pathway_2">
            <div class="box2">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
        </div>

        <div class="pathway_3">
            <div class="box3">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
        </div>

        <div class="pathway_4">
            <div class="box4">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
        </div>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <script>
        function init() {
            var oWrap = $('.pathway_box');
            oWrap.css({
                transform: 'translateX(-50%) translateY(-50%) rotateX(-10deg) rotateY(30deg) scale(1)',
                transition: 'transform 3s'
            });
            setTimeout(function() {
                bindEvent();
            }, 3000);
        }
        init();

        function bindEvent() {
            var oWrap = $('.pathway_box');
            oWrap.css({
                transition: ''
            })
            var body = $('body');
            var lastX, lastY, nowX, nowY, disX = 0, disY = 0;
            var roY = 0, roX = -10;
            var timer;
            body.on('mousedown', function (e) {
                var event = e || window.event;
                clearInterval(timer);
                lastX = event.clientX;
                lastY = event.clientY;
                body.on('mousemove', function (e) {
                    var event = e || window.event;
                    nowX = event.clientX;
                    nowY = event.clientY;
                    disX = nowX - lastX;
                    disY = nowY - lastY;
                    roY += disX * 0.2;
                    roX -= disY * 0.2;
                    console.log(nowX, disX, roY)
                    oWrap.css({
                        'transform': 'translateX(-50%) translateY(-50%) rotateX(' + roX + 'deg) rotateY(' + roY + 'deg) scale(1)',
                        'cursor': 'move'
                    });
                    lastX = nowX;
                    lastY = nowY;//每次将当前触发对象的点为变化的初始点，
                });
                body.on('mouseup', function () {
                    body.off('mousemove')
                    clearInterval(timer);
                    timer = setInterval(function () {
                        disX *= 0.98;
                        disY *= 0.98;
                        roY += disX * 0.2;
                        roX -= disY * 0.2;
                        oWrap.css({
                            'transform': ' translateX(-50%) translateY(-50%) rotateX(' + roX + 'deg) rotateY(' + roY + 'deg)',
                            'cursor': 'pointer'
                        })
                        if (Math.abs(disX) < 0.1 && Math.abs(disY) < 0.1) {
                            clearInterval(timer);
                        }
                    }, 20);
                });
                return false;//取消鼠标默认事件
            });
        }
    </script>
</body>

</html>
